<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      Vue.config.devtools = true;
    </script>
  </head>
  <body>
    <div id="app">
      <p>current Id {{ id }}</p>
      <p>
        <button @click="id--">prev</button>
        <button @click="id++">next</button>
      </p>
      <div>
        <label for="throwError">Throw error</label>
        <input type="checkbox" name="throwError" v-model="throwError" />
      </div>
      <div>
        <label for="retryMode">Retry mode:</label>
        <select name="retryMode" v-model="mode">
          <option value="delay">Delay</option>
          <option value="backoff">Exponential backoff</option>
        </select>
      </div>
      <div v-if="mode === 'delay'">
        <label for="delay">Delay</label>
        <input type="number" name="delay" v-model.number="delay" />
      </div>
      <p v-if="loading">
        loading...
      </p>
      <p v-else-if="isRetrying">
        retrying in {{ Math.floor(nextRetry - dateNow) }}ms
        <span>Current: {{ retryCount }} retries</span>
      </p>
      <div v-else>
        <p>Status: {{ status }}</p>
        <span>{{ json }}</span>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/@vue/composition-api@0.3.2/dist/vue-composition-api.umd.js"></script>
    <script>
      // add composition api to vue
      Vue.use(vueCompositionApi.default);
    </script>
    <script src="../packages/vue-composable/dist/vue-composable.global.js"></script>
    <script>
      const { useFetch, useRetry, exponentialDelay } = vueComposable;
      const { computed, ref, watch } = vueCompositionApi;

      new Vue({
        el: "#app",

        setup() {
          const id = ref(1);
          const throwError = ref(false);
          const delay = ref(200);
          const dateNow = ref(Date.now());
          const mode = ref("delay");

          const retryDelay = n => {
            switch (mode.value) {
              case "delay":
                return delay.value;
              case "backoff":
                return exponentialDelay(n);
            }
          };

          const { json, loading, exec: fetchExec, error, status } = useFetch();
          const { isRetrying, nextRetry, retryCount, exec } = useRetry({
            retryDelay
          });

          watch(id, id => {
            exec(() => {
              if (throwError.value) {
                throw new Error("blocked");
              }
              return fetchExec(`https://reqres.in/api/user/${id}`);
            });
          });

          // just to have a nice countdown
          setInterval(() => (dateNow.value = Date.now()), 10);

          return {
            id,
            json,
            loading,
            status,
            retryCount,
            delay,
            mode,
            throwError,
            isRetrying,
            nextRetry,
            dateNow
          };
        }
      });
    </script>
  </body>
</html>
